class Cart{
    constructor(){
        this.url = "http://127.0.0.1:3000/apiData/cartlist.json";
        this.load();
        this.addEvent();
    }
    addEvent(){
        let that = this ;
        $("table").on('click','.remove',function(){
            console.log($(this).data('index'))
            that.proData.splice($(this).data('index'),1)
            localStorage.setItem("addcart",JSON.stringify(that.proData))
            that.render()
        })
         
        $("table").on('input','.num',function(){
            // console.log($(this).data("index"));

            that.proData[ $(this).data("index")].num = $(this).val();
            that.render()
           

        })
        $(".checkall").click(function(){
            // console.log($(this)[0].checked);

            $(".checkitem").prop("checked",$(this)[0].checked)
        })
    }

    load(){
        // $.ajax({
        //     url:this.url,
        //     dataType:"json",
        //     success:res=>{
        //         // console.log(res)
        //         let bddata = JSON.parse(localStorage.getItem("addcart"));

        //         this.proData = res.concat(bddata)
        //         this.render();
        //     }
        // })
        let bddata = JSON.parse(localStorage.getItem("addcart"));

        this.proData = bddata
        this.render()
    }
    render(){
        let str = "";
        this.proData.forEach((val1,index) => {
            str += `
            <tr class="duct">
                <td  style="width:80px"><input type="checkbox"  class="checkitem"></td>
                <td>
                    <img src="${val1.url}" alt="">
                </td>
                <td style="width:200px">${val1.name}</td>
                <td>${val1.price}</td>
                <td><input type="number" value="${val1.num}" min="1" class="num" data-index="${index}"></td>
                <td>${val1.price*val1.num}</td>
                <td class="remove" data-index="${index}">删除</td>
            </tr>`
        })
        // console.log(str);
        $("table tbody").html(str) ;
    }
}
new Cart;